Description

While there is currently a way to specify at runtime the redirect_uri used within the login handler (thus overriding process.env.AUTH0_BASE_URL), the same cannot be done from within the callback handler, resulting in an unauthorized_client bad request error indicating the mismatch between both URLs.

This lack of consistency is evident in login.ts where LoginOptions.authorizationParams.redirect_uri takes precedence over building the redirect URL with urlJoin(config.baseURL, config.routes.callback), while on callback.ts there is no possibility of modification: the redirect url will always be urlJoin(config.baseURL, config.routes.callback).

This PR introduces a new option on CallbackOptions: the optional redirectUri. With it, one can specify a different URL at runtime in [...auth0].tsx by overriding the login and callback handlers. In the following example, assume that the redirect URI is different from AUTH0_BASE_URL, and that its definition might depend on custom headers or other data coming from NextApiRequest, thus rendering the alternative of customizing initAuth0 not viable.

import { handleAuth, handleCallback, handleLogin } from '@auth0/nextjs-auth0';
import { NextApiRequest } from 'next';

export default handleAuth({
  async login(req, res) {
    const baseUrl = "http://messi:3000";
    const options = {
      authorizationParams: {
        redirect_uri: `${baseUrl}/api/auth/callback`
      }
    };

    try {
      await handleLogin(req, res, options);
    } catch (error) {
      res.status(error.status || 400).end(error.message);
    }
  },

  async callback(req, res) {
    const baseUrl = "http://messi:3000";
    const options = {
      redirectUri: `${baseUrl}/api/auth/callback`
    };

    try {
      await handleCallback(req, res, options);
    } catch (error) {
      res.status(error.status || 400).end(error.message);
    }
  }
});

References

Other issues (#108, #154, #295) either directly or indirectly reference this limitation, mostly within the context of a Vercel deployment. We have experienced this ourselves while developing a multi-tenant nextjs auth0 app.

Testing

I've introduced a test case to ensure CallbackOptions.redirect_uri can be specified at runtime.

To replicate this in a real application just set your AUTH0_BASE_URL environment variable to a specific host (for example http://localhost:3000), and then define a different URL in authorizationParams.redirect_uri on the login handler (such as http://messi:3000), which should resolve to the same nextjs app. After logging in on auth0 and being sent back to the nextjs app to handle the oauth callback, it'll consistently fail with a bad request unauthorized_client (The redirect URI is wrong. You sent http://localhost:3000, and we expected http://messi:3000). Applying this PR and utilizing CallbackOptions.redirectUri as shown before solves the problem.